<template>
  <div class="app-container tab_inspection">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('attendance.Flights')" name="first">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
        >
          <el-form-item :label="$t('operating.searchDate')">
            <el-date-picker
              v-model="dateValue"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :clearable="true"
              :start-placeholder="$t('operating.StartTime')"
              :end-placeholder="$t('operating.EndTime')"
              @change="freshList()"
            />
          </el-form-item>

          <!-- <el-form-item :label="$t('staff.search')">
            <el-input
              v-model="queryParams.param.postName"
              :placeholder="$t('operating.pleaseWrite')"
              clearable
              size="small"
            />
          </el-form-item> -->
          <!-- <el-form-item :label="$t('attendance.Flights')">
            <el-select
              v-model="queryParams.param.searchAreas"
              filterable
              clearable
              :placeholder="$t('operating.pleaseChosen')"
            >
              <el-option
                v-for="item in deptSelect"
                :key="item.idx"
                :label="item.layerName"
                :value="item.idx"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList"
            >{{ $t("operating.search") }}</el-button>
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
              $t("operating.reset")
            }}</el-button> -->
          </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:post:export']"
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="leadingOutData"
            >{{ $t("operating.export") }}</el-button>
          </el-col>
          <right-toolbar
            :show-search.sync="showSearch"
            @queryTable="getList"
          />
        </el-row> -->

        <el-table
          ref="multipleTable"
          class="datalist"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="checkName"
            :label="$t('attendance.Flights')"
            min-width="120"
          />
          <el-table-column
            prop="checkDate"
            :label="$t('attendance.AttendanceDate')"
            min-width="120"
          />
          <el-table-column
            prop="timeStart"
            :label="$t('attendance.AttendanceStartTime')"
            min-width="170"
          />
          <el-table-column
            prop="timeEnd"
            :label="$t('attendance.AttendanceEndTime')"
            min-width="170"
          />

          <el-table-column
            prop="personnelNum"
            :label="$t('attendance.attendanceNumber')"
            min-width="80"
          />
          <el-table-column
            prop="actualNum"
            :label="$t('attendance.actualNum')"
            min-width="80"
          />
          <el-table-column
            prop="lateNum"
            :label="$t('attendance.lateNum')"
            min-width="80"
          />
          <el-table-column
            prop="leavearlyNum"
            :label="$t('attendance.leavearlyNum')"
            min-width="80"
          />
          <el-table-column
            prop="absenteesNum"
            :label="$t('attendance.absenteesNum')"
            min-width="80"
          />
          <!-- <el-table-column>
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleRowDetail(scope.$index, scope.row)"
                >{{ $t("operating.seeDetails") }}</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>

        <pagination
          v-show="tableData1.length > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>

      <el-tab-pane :label="$t('attendance.people')" name="second">
        <el-form
          ref="queryForm"
          :model="queryParams1"
          :inline="true"
        >
          <el-form-item :label="$t('operating.searchDate')">
            <el-date-picker
              v-model="dateValue1"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :clearable="true"
              :start-placeholder="$t('operating.StartTime')"
              :end-placeholder="$t('operating.EndTime')"
              @change="freshListStaff()"
            />
          </el-form-item>

          <!-- <el-form-item :label="$t('staff.search')">
            <el-input
              v-model="queryParams.param.postName"
              :placeholder="$t('operating.pleaseWrite')"
              clearable
              size="small"
            />
          </el-form-item> -->
          <el-form-item :label="$t('attendance.people')">
            <el-select
              v-model="queryParams1.resourceId"
              filterable
              clearable
              size="small"
              :placeholder="$t('operating.pleaseChosen')"
              @change="changeValue"
            >
              <el-option
                v-for="item in deptSelect1"
                :key="item.resourceId"
                :label="item.name"
                :value="item.resourceId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList1"
            >{{ $t("operating.search") }}</el-button>
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">{{
              $t("operating.reset")
            }}</el-button> -->
          </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:post:export']"
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >{{ $t("operating.export") }}</el-button>
          </el-col>
          <right-toolbar
            :show-search.sync="showSearch"
            @queryTable="getList"
          />
        </el-row> -->

        <el-table
          ref="multipleTable"
          class="datalist"
          :data="tableData1"

          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="name" :label="$t('attendance.staffName')" min-width="100" />
          <el-table-column prop="departmentName" :label="$t('attendance.departmentName')" min-width="120" />
          <el-table-column prop="checkName" :label="$t('attendance.checkName')" min-width="120" />
          <el-table-column prop="checkDate" :label="$t('attendance.AttendanceDate')" min-width="120" />
          <el-table-column prop="taskDate" :label="$t('attendance.taskDate')" min-width="200" />

          <!-- <el-table-column prop="timeStart" :label="$t('operating.StartTime')" min-width="170" />
          <el-table-column prop="timeEnd" :label="$t('operating.EndTime')" min-width="170" /> -->
          <!-- <el-table-column prop="" label="工时" width="100"></el-table-column> -->
          <el-table-column prop="statusStart" :label="$t('attendance.statusStart')" min-width="100" />
          <el-table-column prop="statusEnd" :label="$t('attendance.statusEnd')" min-width="100" />
        </el-table>

        <pagination
          v-show="tableData1.length > 0"
          :total="total1"
          :page.sync="queryParams1.pageNum"
          :limit.sync="queryParams1.pageSize"
          @pagination="getList1"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import axios from 'axios'
import {
  getClassess,
  getStaffs,
  getClassesList,
  getStaffList
} from '@/api/businessReport/AttendanceReport.js'
export default {
  data() {
    return {
      showSearch: true,
      activeName: 'first',
      tableData: [],
      tableHeight: window.innerHeight - 400,
      deptSelect: [],

      dateValue: [],

      startDate: null,
      endDate: null,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
        // param: {
        //   searchValue: '',
        //   deptValue: undefined,
        //   searchAreas: undefined
        // }
      },
      deptSelect1: [],
      tableData1: [],
      dateValue1: [],
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        resourceId: undefined
        // param: {
        //   searchValue: '',
        //   deptValue: undefined,
        //   searchAreas: undefined
        // }
      },
      startDate1: null,
      endDate1: null,
      total1: 0
    }
  },
  created() {
    this.getClasslist()
    this.getList()
  },
  methods: {
    freshList() {
      if (!this.dateValue) {
        this.dateValue = []
        // this.resetQuery()
        this.queryParams.pageNum = 1
        // this.getList()
      }
    },
    freshListStaff() {
      if (!this.dateValue1) {
        this.dateValue1 = []
        this.queryParams1.pageNum = 1
        // this.resetQuery1()
        // this.getList1()
      }
    },
    changeValue() {
      if (!this.queryParams1.resourceId) {
        delete this.queryParams1.resourceId
        this.queryParams1.pageNum = 1
        // this.resetQuery1()
        // this.getList1()
      }
    },
    leadingOutData() {
      if (this.dateValue) {
        this.startDate = this.dateValue[0]
        this.endDate = this.dateValue[1]

        if (this.activeName == 'first') {
          // 班次
          window.location.href = 'http://192.168.3.114:8080/' + '/report/reportCheck?' +
          (this.searchValue1 === null ? '' : ('checkId=' + this.searchValue1)) +
          '&checkDateStart=' + this.startDate + '&checkDateEnd=' + this.endDate + '&token=' + axios.defaults.headers['token']
        } else {
          // 个人
          window.location.href = 'http://192.168.3.114:8080/' + '/report/reportCheckPersonal?' +
          (this.searchValue2 === null ? '' : ('resourceId=' + this.searchValue2)) +
          '&checkDateStart=' + this.startDate + '&checkDateEnd=' + this.endDate + '&token=' + axios.defaults.headers['token']
        }
      }
    },
    handleSelectionChange() {},
    resetQuery() {
      this.dateValue = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    resetQuery1() {
      this.dateValue1 = []
      this.queryParams1 = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList1()
    },
    handleExport() {},

    // 获取部门下拉框
    getClasslist() {
      getClassess().then((response) => {
        if (response.code === 200) {
          this.deptSelect = response.data
        }
      })
    },
    getStaffslist() {
      getStaffs().then((response) => {
        if (response.code === 200) {
          this.deptSelect1 = response.data
        }
      })
    },
    getList() {
      getClassesList(this.choseDateRange(this.queryParams, this.dateValue, 'checkDate')).then((response) => {
        if (response.rows.length === 0) {
          this.tableData = []
          // this.msgError(this.$t('Notice.noDataHasBeenFound'))
        } else {
          this.total = response.total
          this.tableData = response.rows
        }
      })
    },
    getList1() {
      getStaffList(this.choseDateRange(this.queryParams1, this.dateValue1, 'checkDate')).then((response) => {
        if (response.rows.length === 0) {
          this.tableData1 = []
          // this.msgError(this.$t('Notice.noDataHasBeenFound'))
        } else {
          this.total1 = response.total
          this.tableData1 = response.rows
        }
      })
    },
    handleClick(tab, event) {
      if (tab.index == 1) {
        this.getStaffslist()
        this.getList1()
      }
    }
  }
}
</script>
<style scoped>

.tab_inspection ::v-deep .el-tabs.el-tabs--top {
    height: calc(100% - 35px);
}
.tab_inspection ::v-deep .el-tabs__content {
      height: 100%;
}
.tab_inspection ::v-deep div#pane-first,
.tab_inspection ::v-deep div#pane-second {
    height: 100%;
    overflow: auto;
}

</style>
